import utils, {randomIntFromRange} from './utils'
import EquilateralPolygon from "./EquilateralPolygon";
import Circle from "./Circle";
import Polygon from "./Polygon";
import CircleLikePolygon from "./CircleLikePolygon";
import BeautifulPolygon from "./BeautifulPolygon";
import Barrier from "./Barrier";
import BackGround from "./BackGround";

export {canvas, c, mouse, animateIntervalId, game};

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = innerWidth
canvas.height = innerHeight

const mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66']


// Implementation
let gameArea, testBarrier, backGround, animateIntervalId, game = 0, startTime

// Event Listeners
addEventListener('mousemove', (event) => {
    mouse.x = event.clientX
    mouse.y = event.clientY
})

addEventListener('resize', () => {
    canvas.width = innerWidth
    canvas.height = innerHeight
    init()
})

function init() {

    function GameArea(width, height) {
        this.width = width;
        this.height = height;
    }

    c.clearRect(0, 100, canvas.width, canvas.height);

    // 初始化游戏布
    gameArea = new GameArea(canvas.width, 400);
    game = 0

    backGround = new BackGround(0, 100, canvas.width, 400);
    backGround.show();
    c.fillStyle = "grey";
    c.fillRect(0, 0, canvas.width, 100)
    c.fillRect(0, gameArea.height + 100, canvas.width, canvas.height - gameArea.height - 100)

    startTime = 0;
    c.font = "20px Georgia"
    let scoreBoard = "Score: " + startTime
    c.fillText(scoreBoard, 50, 150)

    c.font = "30px Georgia"
    let hint = "press any key or click to start"
    c.fillStyle = 'black'
    c.fillText(hint, 50, 50);
}


// Animation Loop
function animate() {
    startTime += 20;
    // requestAnimationFrame(animate)
    c.clearRect(0, 100, gameArea.width, gameArea.height)
    if (backGround.update() === false) game = 2;
    c.fillStyle = "grey";
    c.fillRect(0, gameArea.height + 100, canvas.width, canvas.height - gameArea.height - 100)

    // bird.ang += 0.02 * Math.PI;
    // if (bird.ang >= 2 * Math.PI) bird.ang -= 2 * Math.PI;
    // bird.update();
    // testBarrier.update()
    // eq1.update();
    // eq.x = eq.y + 5;
    // eq.update()

    c.font = "20px Georgia"
    let scoreBoard = "Score: " + Math.floor(startTime / 1000) + "." + startTime % 1000
    c.fillText(scoreBoard, 50, 150)
    // eq.x = randomIntFromRange(300, 700);
    // eq.x = eq.x + 10;
    // eq.update();
    // eq1.updateWithMouse();
    // eq2.updateWithRandomAngle();
    // circle.update();
    // objects.forEach(object => {

    //  object.update()
    // })
}

init()
// animateIntervalId = setInterval(animate, 20)

// requestAnimationFrame(animate)
// setTimeout(animate, 2000)
// while (true) setTimeout(animate, 200);


// animate();
// animate();
// animate();
// animate();
// animate();
// animate();
// animate();
// animate();
// animate();
// animate();
// animate();


addEventListener('click', (event) => {
    updateGameState()
})
//
addEventListener('keydown', () => {
    updateGameState()
})

function updateGameState() {
    if (game === 0) {
        game = 1
        startTime = 0;
        animateIntervalId = setInterval(animate, 20)
    }
    if (game === 1) {
        backGround.movingObj.changeSpeed();
    }
    if (game === 2) {
        game = 0
        init()
    }
}

